<template>
  <div id="app">
    <h2>练习 导入 </h2>
    <!-- <div class="box"></div> -->
    <!-- <van-cell title="选择单个日期" :value="date" @click="show = true" />
    <van-calendar v-model="show" @confirm="onConfirm" /> -->
    <!-- <van-button plain type="primary">朴素按钮</van-button> -->
    <!-- 日期范围 -->
    <van-cell title="选择日期区间" :value="date" @click="show = true" />
    <van-calendar v-model="show" type="range" @confirm="onConfirm" />

    <!-- 滑块 -->
    <van-slider v-model="value" @change="onChange" />

    <!-- router-view可以是单标签 -->
    <!-- <router-view></router-view> -->
    <van-button plain type="primary" @click="goRegister">注册用户</van-button>
    <van-button plain type="primary" @click="goLogin">登录账号</van-button>
    <router-view/>
  </div>
</template>
<script>

import dayjs from 'dayjs'
// 加括的导入，按需导入，  export const reqest
import request from '@/utils/request.js'

// 按需导出的，使用的时候，加{}
import { setToken } from '@/utils/storage'
export default {
  data () {
    return {
      date: '',
      show: false,
      value: 50
    }
  },

  methods: {
    onChange (value) {
      // toast组件全局导入之后，可以this.$toast使用
      this.$toast('当前值：' + value)
    },
    onConfirm (date) {
      const [start, end] = date
      this.show = false
      // this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
      console.log(start, end)
      // console.log(this.date)
      console.log(dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD'))
    },
    // 注册
    async goRegister () {
      const res = await request.post('/user/register', {
        username: 'zxdfe666',
        password: '123456'
      })
      console.log(res)
    },
    // 登录
    async goLogin () {
      const res = await request.post('/user/login', {
        username: 'zxdfe666',
        password: '123456'
      })
      const { token } = res.data
      setToken(token)
      // localStorage.setItem('my-h5-vant-token', token)
      // console.log(token)
    }
  }
}

// 1. 日历 日期范围   ==>  转为 YYYY-MM-DD格式
// 2. 时间选择  选择年月日
// 3. slider滑块
</script>
<style>
.box{
  width:200px;
  height: 200px;
  background-color: orange;
}
</style>
